<template>
	<view style="padding-bottom: 50rpx;">
		<page-head :title="'试驾体验'" :headtype="2"></page-head>
		<view class="banner marginAuto" style="margin-top:10rpx;">
			<uv-swiper class="banner" height="195" :list="bannerdata" keyName="image"></uv-swiper>
		</view>
		<view class="jdmsg marginAuto">
			<view class="jdmsgtitle ellipsis01">{{ datas.title }}</view>
			<view class="jdmsgbm">{{ datas.num }}人报名</view>
			<view class="jdmsgsite flex">
				<uv-icon style="margin-right:10rpx;margin-top:3rpx;" name="clock" size="14" color="#666666"></uv-icon>
				<view class="jbmsgsitetxt">{{ datas.begin_time }} - {{ datas.end_time }}</view>
			</view>
		</view>
		<view class="drivesite flex marginAuto">
			<view class="drivesitetitle">试驾城市：</view>
			<!-- @click="$refs.siteref.open()" -->
			<view class="drivesiter flex">
				<view class="drivesiterno" style="color:#999999;" v-if="!regionName">请选择试驾城市</view>
				<view class="drivesitery" style="color: #333333;" v-if="regionName">{{ regionName }}</view>
				<uv-icon style="margin-top:2rpx;" name='arrow-right' size="16" color="#999999"></uv-icon>
			</view>
			<!-- <pick-regions :defaultRegion="defaultRegion" @getRegion="handleGetRegion">
				<view class="drivesiter flex">
					<view class="drivesiterno" style="color:#999999;" v-if="!regionName">请选择试驾城市</view>
					<view class="drivesitery" style="color: #333333;" v-if="regionName">{{ regionName }}</view>
					<uv-icon style="margin-top:2rpx;" name='arrow-right' size="16" color="#999999"></uv-icon>
				</view>
			</pick-regions> -->
		</view>
		<view class="details">
			<view class="detailstitle marginAuto">详情信息</view>
			<view class="detailsmain marginAuto">
				<uv-parse :content="datas.content"></uv-parse>
			</view>
		</view>
		<view class="marginAuto" style="width:600rpx;margin-top:60rpx;">
			<uv-button text="参加报名" @click="signupfun()" :customStyle="{
				'background':'#1686F8',
				'color':'#ffffff',
				'font-size':'30rpx',
				'width':'600rpx',
				'height':'100rpx',
				'border-radius':'100rpx'
			}"></uv-button>
		</view>
		<uv-picker ref="siteref" :columns="sitedata" keyName="name"  @confirm="entersite"></uv-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				apifun:this.apifun,
				id:'',
				datas:{},
				bannerdata:[],
				sitedata:[[]],
				regionid:'',
				
				// defaultRegion: [], // ['河南省', '郑州市', '中原区']
				// defaultRegionCode: '', // 410102
				// province_id: 0,
				// city_id: 0,
				// area_id: 0,
				regionName: '',
				
				// lng:this.apifun.lng,
				// lat:this.apifun.lat,
				lng: '',
				lat: '',
				sitemsg:{}
				
			};
		},
		onLoad(option) {
			this.id = option.id;
			this.initData();
			this.getpositionfun();
		},
		methods: {
			getpositionfun(){  // 获取位置
				uni.getLocation({
					type: 'gcj02',  // wgs84
					success:(res)=> {
						let lng = res.longitude;
						let lat = res.latitude;
						this.lng = lng;
						this.lat = lat;
						uni.setStorageSync('lat', lat);
						uni.setStorageSync('lng', lng);
						this.getLocationInfofun();
					}
				});
			},
			getLocationInfofun(){
				let sendData = {
					lng:this.lng,
					lat:this.lat,
				};
				this.apifun.unirequest('/api/index/getLocationInfo','post',sendData,(res)=>{
					if(res.code === 200){
						let datas = res.data;
						this.sitemsg = datas.ad_info;
						this.regionName = datas.ad_info.city;
						this.regionid =  datas.ad_info.adcode;
						uni.setStorageSync('lat', this.lat);
						uni.setStorageSync('lng', this.lng);
						uni.setStorageSync('sitemsg', datas.ad_info);
						/*
						adcode: "410104"
						city: "郑州市"
						city_code: "156410100"
						district: "管城回族区"
						location: {lat: 34.754436, lng: 113.677446}
						name: "中国,河南省,郑州市,管城回族区"
						nation: "中国"
						nation_code: "156"
						phone_area_code: "0371"
						province: "河南省"
						*/
					}else{
						this.apifun.toast(res.msg)
					}
				},true,true)
			},
			signupfun(){  //  报名
				if(!uni.getStorageSync('token')){
					this.apifun.toast('请登录后再试');
					return false
				};
				let sendData = {
					id:this.id,
					city_id:this.regionid
				};
				if(this.regionid == ''){
					this.apifun.toast('请选择试驾城市')
					return false
				}
				this.apifun.unirequest('/api/testDrive/submitTestDriverOrder','post',sendData,(res)=>{
					if(res.code === 200){
						let datas = res.data;
						this.apifun.navigate('/pages/home/testdrivesuccess');
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			initData(){
				let sendData = {
					id:this.id
				}
				this.apifun.unirequest('/api/testDrive/getTestDriveDetail','post',sendData,(res)=>{
					if(res.code === 200){
						let datas = res.data;
						this.datas = datas;
						this.sitedata[0] = datas.city;
						this.bannerdata =[{
							"image":this.apifun.URLimg+datas.img,
						}];
					}else{
						this.apifun.toast(res.msg)
					}
				},true,true)
			},
			entersite(e){
				let data = e.value;
				this.regionName = data[0].name;
				this.regionid = data[0].city_id;
				// let indexs =  e.indexs[0];
				// this.regionName = this.sitedata[0][indexs];
				// this.regionid = this.datas.city_ids[indexs];
			},
			handleGetRegion(e){  // 废弃
				this.regionName = e[0].name+'-'+e[1].name+'-'+e[2].name;
				this.province_id = e[0].code;
				this.city_id = e[1].code;
				this.area_id = e[2].code;
			},
		},
	};
</script>

<style scoped lang="scss">
	.banner{
		position: relative;
		z-index: 10;
		width:100%;
		height: 400rpx;
	}
	//
	 .jdmsg{
	 	width: 650rpx;
	 	padding: 20rpx;
	 	background:#ffffff;
	 	border-radius: 20rpx;
	 	margin-top: 20rpx;
	 	.jdmsgtitle{
	 		font-size:34rpx;
	 		color: #222222;
	 		line-height: 50rpx;
	 	}
	 	.jdmsgbm{
	 		display:inline-block;
	 		padding: 0 20rpx;
	 		line-height:40rpx;
	 		font-size:24rpx;
	 		color: #0089FB;
	 		background:#E7F2FF;
	 		border-radius: 4rpx;
	 		margin: 10rpx 0;
	 	}
	 	.jdmsgsite{
	 		padding: 5rpx 0 0;
	 		.jbmsgsitetxt{
	 			font-size: 24rpx;
	 			color: #666666;
	 			line-height: 40rpx;
	 		}
	 		.jbmsgsitejl{
	 			margin-left: 20rpx;
	 			line-height: 40rpx;
	 		}
	 	}
	 }
	// 
	.drivesite{
		width: 650rpx;
		padding: 20rpx;
		margin-top: 20rpx;
		justify-content: space-between;
		background: #fff;
		border-radius: 20rpx;
		.drivesitetitle{
			font-size: 28rpx;
			color: #333333;
			line-height: 60rpx;
		}
		.drivesiter{
			font-size: 30rpx;
			line-height: 60rpx;
		}
	}
	// 详情信息
	.details{
		.detailstitle{
			width: 690rpx;
			height: 30rpx;
			line-height: 30rpx;
			border-left:4rpx solid #0089FB;
			padding-left: 10rpx;
			margin:20rpx auto;
		}
		.detailsmain{
			width: 690rpx;
			border-radius: 20rpx;
			color:#333333;
			font-size: 30rpx;
			line-height:44rpx;
		}
	}
</style>